@extends('admin.layouts.app')
@section('title', '预览 PDF')
@section("js-head")
    <script src="{{ asset('/static/js/libs/pdfjs/build/pdf.js') }}"></script>
    <script src="{{ asset('/static/js/libs/pdfjs/build/pdf.worker.js') }}"></script>
@endsection
@section("content")
    <div id="myToast" class="app-toast">
        <div class="app-toast-text">提示内容222</div>
    </div>
    <div class="app-main demo">
        <div class="row">
            <div class="col-12">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>基础用法</h4>
                    </div>
                    <div class="app-card-content">
                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>_blank</code>方式打开</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<a href="{{ asset('/static/js/libs/pdfjs/web/viewer.html') }}?file={{ asset('/download/info.pdf') }}" target="_blank">预览PDF</a>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>
                        <!--/demo-row-->

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>Iframe</code>方式打开</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<iframe src="{{ asset('/static/js/libs/pdfjs/web/viewer.html') }}?file={{ asset('/download/info.pdf') }}" width="100%" height="600px"></iframe>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>
                        <!--/demo-row-->

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>Dialog</code>方式打开</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
                                    <div class="row">
                                        <div class="col">
                                            <button type="button" class="btn btn-default btn-lg" id="btn-01">点击预览</button>
                                        </div>
                                    </div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="exampleModal-01" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">PDF 预览</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div id="pageContainer"></div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script>

                                        $('#btn-01').on('click', function (e) {
                                            $('#exampleModal-01').modal({
                                                remote: '{{ asset('/static/js/libs/pdfjs/web/viewer.html') }}?file={{ asset('/download/info.pdf') }}'
                                            })
                                        })
                                    </script>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>
                        <!--/demo-row-->

                    </div>
                    <!--/demo-code-->

                </div>
            </div>
        </div>
        <!--/row-->

        <div class="row">
            <div class="col-12">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>高级用法</h4>
                    </div>
                    <div class="app-card-content">
                        <div class="row demo-code">
                            待开发中...
                        </div>

                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->

    </div>
    <!--/body-->
@endsection
@section('js')
    <script>
        (function () {
            // page
            var Page = {
                init: function () {
                    // App.toast('1111')
                    this.bind()
                },
                bind: function () {
                    var self = this
                }
            }

            // ready
            $(function () {
                Page.init()
            });
        }());
    </script>
@endsection
